<!-- 三元运算符连用判断添加的类名   a标签的状态 -->
<script>
export default {
  data() {
    return {
      //上方棋盘
      //可以落子的位置
      //纵横 设定棋盘大小
      Latitude: 15,

      //判断是否获胜
      victory: false,
      //判断是否开始
      begin: false,

      //胜利显示的界面
      conceal: "",

      // 落子计数
      //单数黑子 双数白子
      CU: 0,
      ColorBuffer: [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
    };
  },
  methods: {
    MoveInChess(count, num, event) {
      //在已经下过棋的地方无法触发点击事件
      //已经点击过的 对应下标的二维数组 值 改变
      //点击过开始后可以 开始改变二维数组的值

      if (
        this.ColorBuffer[count - 1][num - 1] === 0 &&
        this.begin === true &&
        this.conceal === ""
      ) {
        //计数器次数加一
        this.CU++;
        //单数黑子
        if (this.CU % 2 === 1) {
          //单数黑子
          //改变 二维数组存储的值为 2
          this.ColorBuffer[count - 1][num - 1] = 2;
        } else if (this.CU % 2 === 0) {
          //双数白子
          //改变 二维数组存储的值为 2
          this.ColorBuffer[count - 1][num - 1] = 1;
        }
      }
    },
    //每一次落子都会触发,判断
    Success() {
      // 双层循环遍历所有字符
      //横向
      console.log(this.ColorBuffer);
      for (let i = 0; i < this.Latitude; i++) {
        // 拼接用来判断的字符串
        //横向判断的变量
        let Judge = "";
        // 每个横判断完后设定num值 下一次循环开始计数
        let num = 0;
        for (let m = 0; m < this.Latitude; m++) {
          Judge += this.ColorBuffer[i][m];
          //当每次累加五个后就会判断是否胜利
          //是跳出方法
          //否 择使拼接从第二个位置进行判断 依次使判断完所有数据
          if (Judge.length === 5) {
            // 上一个判断完后要从下一个重新计数开始判断
            //需要值 记录
            //类似与数组删除后的坍塌
            num++;
            if (Judge === "11111" || Judge === "22222") {
              console.log("胜利");
              if (Judge === "11111") {
                this.conceal = 1;
              }
              if (Judge === "22222") {
                this.conceal = 2;
              }
              return;
            }
            //没有判断成功的从从下一个开始判断
            //给其他值 赋值初值
            m = num;
            Judge = "";
          }
        }
        //因为之后几次无法累加到五次就结束了内层循环,没有将 Judge 赋值为空
        Judge = "";
      }

      // 双层循环遍历所有字符
      // 纵向判断

      for (let i = 0; i < this.Latitude; i++) {
        // 纵向判断
        let Judge = "";
        // 每个纵判断完后设定numS值 下一次循环开始计数
        let num = 0;
        for (let m = 0; m < this.Latitude; m++) {
          Judge += this.ColorBuffer[m][i];

          //当每次累加五个后就会判断是否胜利
          //是跳出方法
          //否 择使拼接从下一个位置进行判断 依次使判断完所有数据
          if (Judge.length === 5) {
            // 上一个判断完后要从下一个重新计数开始判断
            //需要值记录
            //类似与数组删除后的坍塌
            num++;
            //判断字符串 内容判断是否胜利
            if (Judge === "11111" || Judge === "22222") {
              console.log("胜利");
              if (Judge === "11111") {
                this.conceal = 1;
              }
              if (Judge === "22222") {
                this.conceal = 2;
              }
              return;
            }
            //没有判断成功的从从下一个开始判断
            //给其他值 赋值初值
            m = num;
            // numZS = 0;
            Judge = "";
          }
        }
        //因为之后几次无法累加到五次就结束了内层循环,没有将 Judge 赋值为空
        Judge = "";
      }

      // 双层循环遍历所有字符
      //斜向下判断是否是胜利
      for (let i = 0; i < this.Latitude - 4; i++) {
        // 纵向判断
        let Judge = "";
        for (let m = 0; m < this.Latitude - 4; m++) {
          //斜向下拼接五个数值
          Judge += this.ColorBuffer[i][m];
          Judge += this.ColorBuffer[i + 1][m + 1];
          Judge += this.ColorBuffer[i + 2][m + 2];
          Judge += this.ColorBuffer[i + 3][m + 3];
          Judge += this.ColorBuffer[i + 4][m + 4];
          //判断字符串 内容判断是否胜利
          if (Judge === "11111" || Judge === "22222") {
            console.log("胜利");
            if (Judge === "11111") {
              this.conceal = 1;
            }
            if (Judge === "22222") {
              this.conceal = 2;
            }
            return;
          }
          Judge = "";
        }
      }
      // 双层循环遍历所有字符
      //斜向下判断是否是胜利
      for (let i = 4; i < this.Latitude; i++) {
        // 纵向判断
        let Judge = "";
        for (let m = 0; m < this.Latitude - 4; m++) {
          //斜向上拼接五个数值
          Judge += this.ColorBuffer[i][m];
          Judge += this.ColorBuffer[i - 1][m + 1];
          Judge += this.ColorBuffer[i - 2][m + 2];
          Judge += this.ColorBuffer[i - 3][m + 3];
          Judge += this.ColorBuffer[i - 4][m + 4];
          //判断字符串 内容判断是否胜利
          if (Judge === "11111" || Judge === "22222") {
            if (Judge === "11111") {
              this.conceal = 1;
            }
            if (Judge === "22222") {
              this.conceal = 2;
            }
            console.log("胜利");
            return;
          }
          Judge = "";
        }
      }
    },
    //判断棋局开始 还是输赢
    start(numb) {
      if (numb === 1) {
        this.begin = true;
        this.conceal = "";
      } else if (numb === 2) {
        this.begin = false;
      }

      this.ColorBuffer = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ];
    },
  },
};
</script>
<template>
  <div class="Gobang">
    <div class="operate">
      <img
        src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=126555842bf5e0feee4d81076c501890/359b033b5bb5c9eaf7b4597ed339b6003bf3b3ec.jpg"
        alt=""
      />

      <table>
        <!-- 循环生成 棋盘 -->
        <tr v-for="count in Latitude" :key="count">
          <td v-for="num in Latitude" :key="num">
            <a
              @click="MoveInChess(count, num, $event), Success(count, num)"
              :class="{
                Black: ColorBuffer[count - 1][num - 1] === 1,
                White: ColorBuffer[count - 1][num - 1] === 2,
              }"
            ></a>
          </td>
        </tr>
      </table>
    </div>

    <div class="List">
      <ol>
        <li @click="start(1)">开始</li>
        <li @click="start(2)">认输</li>
      </ol>
    </div>
    <div class="conceal">
      <p v-if="conceal === 1 ? true : false">
        <span style="color: #000">黑棋胜利</span>
      </p>
      <p v-if="conceal === 2 ? true : false">
        <span style="color: #fff">白棋胜利</span>
      </p>
      <p v-if="conceal === 3 ? true : false">
        <span style="color: #fff">认输游戏结束</span>
      </p>
    </div>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.Gobang {
  width: 745px;
  position: relative;
  margin: 0 auto;
}

.Gobang .conceal {
  width: 100%;
  position: absolute;
  left: 0;
  top: 40%;
  font-size: 80px;
  text-align: center;
}

.Gobang table,
.Gobang table td {
  border-collapse: collapse;
  border: 0px;
}

img {
  width: 745px;
  height: 725px;
}

.Gobang table {
  position: absolute;
  left: 64px;
  top: 35px;
}

.Gobang table tr {
  width: 640px;
  display: flex;
  justify-content: space-around;
}

.Gobang tr {
  height: 42px;
}

.Gobang table td {
  border: 4px transparent solid;

  text-align: center;
  table-layout: fixed;
  padding: 2px;
  box-sizing: border-box;
}

.Gobang table td a {
  display: inline-block;
  width: 30px;
  height: 30px;
}

.Black {
  border-radius: 50%;
  background-color: #000;
}

.White {
  border-radius: 50%;
  background-color: white;
}

.Gobang .List {
  margin: 10px auto;
  background: #000;
  color: aliceblue;
  height: 80px;
  line-height: 80px;
  font-size: 40px;
}

.Gobang .List ol {
  display: flex;
  justify-content: space-around;
}
</style>
